<template>
  <div id="SamstoFridgeList">
      <Splitpanes class="area">
        <Pane size="60">
            <div class='panel-body'>
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="form.keyvalue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keyup.enter.native="findList" @search-click="findList" @clear="findList"></vxe-input>
<!--                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="findList"></vxe-button>-->
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新增" @click="addMethod"></vxe-button>
                  <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="deleteMethod"></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="tableBox">
                <vxe-table ref="tableRef" border="inner" align="left"
                           class="mytable-scrollbar" :loading="showLoading"
                           :data="tableData"
                           :row-config="{ isCurrent: true, isHover: true }"
                           :height="tableHeight"
                           :column-config="{ resizable: true }"
                           @cell-click="tableCellClick"
                           resizable
                           show-overflow>
                  <vxe-column field="boxCode" title="编号" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      {{row.boxCode}}
                    </template>
                  </vxe-column>
                  <vxe-column field="boxBarcode" title="条码号" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      {{row.boxBarcode}}
                    </template>
                  </vxe-column>
                  <vxe-column field="frimodId" title="冰箱型号" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      {{row.modelName}}
                    </template>
                  </vxe-column>
                  <vxe-column field="layerNum" title="架层" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      {{row.layerNum}}
                    </template>
                  </vxe-column>
                  <vxe-column field="frigTemp" title="冷藏温度" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      {{row.frigTemp}}
                    </template>
                  </vxe-column>
                  <vxe-column field="freezeTemp" title="冷冻温度" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      {{row.freezeTemp}}
                    </template>
                  </vxe-column>
                  <vxe-column field="deptName" title="所属科室" width="160" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      {{row.deptNameer}}
                    </template>
                  </vxe-column>
                  <vxe-column field="seq" title="位置排序" width="50" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      {{row.seq}}
                    </template>
                  </vxe-column>
                </vxe-table>
                <vxe-pager
                  align="left"
                  :current-page.sync="page.currentPage"
                  :page-size.sync="page.pageSize"
                  :total="page.totalResult"
                  :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
                  @page-change="handleSizeChange($event)"
                ></vxe-pager>
              </div>
            </div>
        </Pane>

        <Pane size="40">
          <div class="bankContent">

              <el-tabs type="border-card" v-model='activeName'>
                <el-tab-pane label="基本信息" name="infoForm">
                  <SamstoFridgeForm ref="samstoFridgeFormRef"
                                    :currentRow="curSelectRow"
                                    :asknDicts="asknDicts"
                                    :pCurSelectRow="pCurSelectRow"
                                    @findList="findList" />
                </el-tab-pane>
                <el-tab-pane label="层架管理" name="fridgeLayer">
                  <FridgeLayerList ref="fridgeLayerListRef"
                                    :currentRow="curSelectRow"
                                    :asknDicts="asknDicts"
                                    :pCurSelectRow="pCurSelectRow"
                                    @findList="findList" />
                </el-tab-pane>
                <ExtraPropertyPanel :busRow="curSelectRow" />
              </el-tabs>
          </div>
        </Pane>
      </Splitpanes>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance, onMounted, watch, PropType } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeColumnPropTypes, VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import type { VxeTableInstance} from 'vxe-table';
import ExtraPropertyPanel from '@/components/ExtraPropertyPanel.vue';
import { AppStore } from '@/stores/store';
import SamstoFridgeForm from "../form/SamstoFridgeForm.vue";
import FridgeLayerList from "../list/FridgeLayerList.vue";
import {  IsEmpty } from '@/utils/common';
import {
  samstoFridgeDelete,
  samstoFridgeFindByGId, samstoFridgeGetInfo, samstoFridgeLayerPagelist,
  samstoFridgePagelist
} from '@/views/lab_sys/samsto_set/apis/samsto_api';
let store = AppStore();

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 左侧表格:
let showLoading = ref(false); //刷新+表格加载
const form = reactive({ keyvalue: '' }); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据
const curSelectRow = ref({});
const pCurSelectRow = ref({});
const asknDicts = reactive([]);
const isPageDisabled = ref(true);
let tableHeight = ref(window.innerHeight - 225);
// 右侧表单:
const samstoFridgeFormRef = ref<InstanceType<typeof SamstoFridgeForm>>(); //基本信息表单标记ref
const fridgeLayerListRef = ref<InstanceType<typeof FridgeLayerList>>(); //基本信息表单标记ref
const activeName = ref('infoForm');
const infoTabPaneDisabled = ref(true);
const infoItemTabPaneDisabled = ref(true);
// 分页
const PageSizeList = [10, 50, 100, 200, 500];
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[0],
  totalResult: 0
});

defineExpose({
  findList,initPage
});
//字典字段格式化展示
const formatterDicts: VxeColumnPropTypes.Formatter<RowVO> = ({ cellValue }) => {
  const item = asknDicts.find(item => item.code === cellValue)
  return item ? item.name : cellValue
}
watch(curSelectRow, (newValue, oldValue) => {
  if (!IsEmpty(newValue.id)){
    isPageDisabled.value=false;
    infoTabPaneDisabled.value=false;
  }else{
    activeName.value="infoForm";
    isPageDisabled.value=true;
    infoTabPaneDisabled.value=true;
  }
});
// 方法定义区 =============
onMounted(() => {
  //getDicts('asknDictBankClass');
  findList(); // 获取题库数据
});
// 父组件传值
let props = defineProps({
//  infoDicts: { type: Array as PropType<any>, required: true },
  currentRow: { type: Object as PropType<any>, required: true }
}) as any;
watch(
  () => props.currentRow,
  (nval, oval) => {
    pCurSelectRow.value=nval;
  },
  {
    deep: true,
    immediate: true
  }
);
async function initPage(selsectRow:any) {
  pCurSelectRow.value=selsectRow;
  findList();
}

// 获取表格数据
async function findList() {
  showLoading.value = true;
  curSelectRow.value={};
  tableData.length = 0; //放入数据前清空数据
  const res: any = await samstoFridgeFindByGId(
    {
      keywords: form.keyvalue,
      frimodId: pCurSelectRow.value.id,
      pageIndex: page.currentPage,
      pageSize: page.pageSize
    });
  if (res.status.code == 1) {
    tableData.push(...res.data.records);
    page.totalResult = res.data.total;
  }
  showLoading.value = false;
}
//分页事件
function handleSizeChange({type, currentPage, pageSize}: any) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  findList();
}
//获取字典信息'asknDictBankClass'
function getDicts(codeValue) {
  const url = '/api/sys/basDictDetail/findDictDetailList';
  proxy.$http
    .get(url, { params: { code: codeValue } })
    .then((res: any) => {
      asknDicts.length = 0; //放入数据前清空数据
      const typeData = res.data;
      for (let i in typeData) {
        const type = {
          id: typeData[i].commonId,
          name: typeData[i].name,
          code: typeData[i].code
        };
        asknDicts.push(type);
      }
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}
// 新增
async function addMethod() {
  activeName.value="infoForm";
  const $formRef = samstoFridgeFormRef.value;
  samstoFridgeFormRef.value?.addNew((e: any) => {
    //todo
  });
}

// 保存调用子菜单
function saveMethod() {
  const $formRef = samstoFridgeFormRef.value;
  samstoFridgeFormRef.value?.saveForm((e: any) => {
    findList();
  });
}

// 删除
const deleteMethod = async () => {
  const deleteInfo ={
    cancelButtonClass: 'cancel-button',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  };
  if (IsEmpty(curSelectRow.value.id)) {
    VxeMessage('请先选中要删除的项', VxeNotifyType.warning);
    return;
  }
  await proxy.$confirm('确定删除此条数据？', '提示', deleteInfo);
  let ids = [curSelectRow.value.id];
  const res: any = await samstoFridgeDelete(ids);
  res.status.code === 1 ? VxeMessage(res.status.msg, VxeNotifyType.success) : VxeMessage(res.status.msg, VxeNotifyType.error);
  await findList();
}

// 表格选中当前行
function tableCellClick({ row }: any) {
  curSelectRow.value = row;
  proxy.$forceUpdate();
  selectItemRows(curSelectRow.value);
}
//选中行后传值给FORM
async function selectItemRows(row) {
  let selectItem=row;
  fridgeLayerListRef.value?.initPage(selectItem);
  // samstoFridgeFormRef.value?.initPage(selectItem);
}
</script>
<style lang="scss" scoped>
#SamstoFridgeList {
  width: 100%;
  height: 100%;
  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
    .area {
      background-color: $base-white;
      .tableBox {
        height: calc(100% - 40px);
      }
      .el-tabs {
        border: none;
        height: 100%;
        :deep(.el-tabs__content) {
          padding:0;
          height: calc(100% - 39px);
          .el-tab-pane {
            height: 100%;
          }
          #pane-0 {
            padding:15px;
            height:calc(100% - 30px);
          }
        }
      }
    }
    .bankItemContent{
      min-height: 600px;
      border-radius: 10px;
    }

    .disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
}
</style>

